﻿<%@ Page Language="C#" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%>
<script RunAt="server">
	protected override void OnPreRender(EventArgs e) {
		base.OnPreRender(e);
		JS.RegisterCommonIncludes(Page);
	}

</script>
<html>
<head>
<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">

</head>
<body>
<form RunAt="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
</form>
<div id="example" class="flora"  title="This is my title">
<div style="overflow:auto;height:100%;border:solid 1px red">
<ul style="border:solid 1px black;padding:0px;margin:0px">
	<li>Field 1</li>
	<li>Field 2</li>
	<li>Field 3</li>
	<li>Field 4</li>
	<li>Field 5</li>
	<li>Field 6</li>
	<li>Field 7</li>
	<li>Field 8</li>
	<li>Field 9</li>
	<li>Field 10</li>
	<li>Field 11</li>
	<li>Field 12</li>
</ul>
</div>
</div>
</body>
</html>
  <script>
  	Sys.Application.add_load(
  	function() {
  		$J("#example").dialog({
  			height: 200,
  			width: 200,
  			resize: function() {
  				//$J(this).children("div").height($J(this).height() - 1);
  				$J(this).children("div").height($J(this).parent()[0].style.pixelHeight - $J(this).parent().children()[0].offsetHeight * 2);
  				$J(this).children("div").width($J(this).parent()[0].style.pixelWidth - 45);
  			}
  		});
  		$J("ul").sortable();
  		//alert(example.innerHTML);
  	});

  	function alert(strMsg) {
  		Actual = $J('<div>')
                .append('<div id="alert" style="overflow:auto;height:272;width:458;position:absolute;top:30;left:5;"­>' +
                strMsg + '</div>')
                .dialog({
                	bgiframe: true,
                	height: 350,
                	width: 470,
                	modal: true,
                	resize: function() {
                		$J("#alert").height($J(this).height() - 78);
                		$J("#alert").width($J(this).width() - 12);
                	},
                	overlay: { opacity: 0.5, background: 'white' },
                	buttons: { 'Aceptar': function() { $J(this).empty().dialog('destroy'); } },
                	title: 'Atenci&oacute;n'
                });
  	}
  </script>
